<template>
  <!-- 添加为商机 -->
  <div class="page">
    <!-- search -->
    <div style="display: flex;flex-direction: row;align-items: center;padding: 12px;background-color: #FFFFFF;">
      <div
        class=""
        @click="popBack()"
      >
        <i
          class="iconfont icon-arrow-left"
          style="font-size: 16px;font-weight: bold;"
        ></i>
        <span style="font-size: 16px;">标记为学生</span>
      </div>
      <div style="margin-left: 12px; flex: 1; background-color: #FFFFFF; display: flex; justify-content: flex-end; ">
        <div
          @click="saveBtnClick"
          style=" font-size: 14px; border: 1px solid #ebebeb; padding: 5px 12px; color: #FFFFFF; background-color: #007AFF;"
        > 保存</div>
      </div>
    </div>

    <!-- step -->
    <div style="padding:5px 12px;display: flex;align-items: center;background-color: #FFFFFF;">
      <div
        @click="tabclick(0)"
        style="flex:1;display: flex;flex-direction: column;align-items: center;"
      >
        <div :style="{'font-size': '14px','color':tabindex==0?'#007AFF':'#333333'}">STEP1</div>
        <div :style="{'font-size': '14px','color':tabindex==0?'#007AFF':'#333333'}">填写基本信息</div>
      </div>
      <div class="iconfont icon-arrow-right"></div>
      <div
        @click="tabclick(1)"
        style="flex:1;display: flex;flex-direction: column;align-items: center;"
      >
        <div :style="{'font-size': '14px','color':tabindex==1?'#007AFF':'#333333'}">STEP2</div>
        <div :style="{'font-size': '14px','color':tabindex==1?'#007AFF':'#333333'}">填写学校信息</div>
      </div>
      <div class="iconfont icon-arrow-right"></div>
      <div
        @click="tabclick(2)"
        style="flex:1;display: flex;flex-direction: column;align-items: center;"
      >
        <div :style="{'font-size': '14px','color':tabindex==2 ? '#007AFF':'#333333'}">STEP3</div>
        <div :style="{'font-size': '14px','color':tabindex==2 ? '#007AFF':'#333333'}">填写跟进信息</div>
      </div>
    </div>

    <!-- form -->
    <div style="flex: 1;overflow-y: auto;">
      <step01
        v-if="tabindex==0"
        @action="pageAction(1)"
        :data="maindata"
      />
      <step02
        v-if="tabindex == 1"
        @action="pageAction(2)"
        :data="maindata"
      />
      <step03
        v-if="tabindex==2"
        @action="pageAction(3)"
        :data="maindata"
      />
    </div>

  </div>
</template>

<script>
import step01 from "./bindasbusiness-s1";
import step02 from "./bindasbusiness-s2";
import step03 from "./bindasbusiness-s3";
import { addStudent, updateStudent } from "../../../api/person.js";
export default {
  components: {
    step01,
    step02,
    step03,
  },
  data() {
    return {
      tabindex: 0,
      maindata: {},
    };
  },
  mounted() {
    // 编辑操作
    let detail = this.$route.params;
    if (detail != undefined) {
      this.maindata = detail;
    }
    console.warn(JSON.stringify(this.maindata));

    let str = sessionStorage.getItem("external_contact");
    let external_contact = JSON.parse(str);
    let { external_userid, gender, name, avatar, type } = external_contact;
    let info = {
      chnSource: type == 1 ? "微信" : "企业微信",
      headUrl: avatar,
      wxUserId: external_userid,
      sex: gender,
      nickName: name,
    };
    let temp = this.maindata;
    this.maindata = { ...info, ...temp };
  },
  methods: {
    popBack() {
      this.$router.back({});
    },
    pageAction(idx) {
      if (idx == 3) {
        this.netAddStudent();
        return;
      }
      this.tabindex = idx;
    },
    tabclick(idx) {
      this.tabindex = idx;
    },
    saveBtnClick() {
      this.netAddStudent();
    },
    netAddStudent() {
      let self = this;
      if (undefined == global.modify || false == global.modify) {
        addStudent(this.maindata)
          .then((res) => {
            let { code, msg } = res;
            if (code == 200) {
              this.$toast.success(msg);
            } else {
              this.$toast.success("添加失败请检查数据");
            }
          })
          .catch((e) => {
            console.error(JSON.stringify(e));
            self.$toast(e);
          });
      } else {
        updateStudent(this.maindata)
          .then((res) => {
            let { code, msg } = res;
            if (code == 200) {
              this.$toast.success(msg);
            } else {
              this.$toast.success("更新失败请检查数据");
            }
          })
          .catch((e) => {
            console.error(JSON.stringify(e));
            self.$toast(e);
          });
      }
    },
  },
};
</script>

<style scoped>
.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}
</style>